{% import 'macro/svg.html' as SVG %}
<div class="container-xl">
  <!-- Page title -->
  <div class="page-header d-print-none">
    <div class="row align-items-center">
      <div class="col">
        <h2 class="page-title">
          自定义下载器
        </h2>
      </div>
      <div class="col-auto ms-auto d-print-none">
        <div class="btn-list">
          <a href="javascript:show_add_downloader_modal()" class="btn btn-primary d-none d-sm-inline-block">
            {{ SVG.plus() }}
            新增下载器
          </a>
          <a href="javascript:show_add_downloader_modal()" class="btn btn-primary d-sm-none btn-icon">
            {{ SVG.plus() }}
          </a>
          <a href="javascript:navmenu('brushtask')" class="btn d-none d-sm-inline-block" title="返回">
            {{ SVG.arrow_back_up() }}
            返回
          </a>
          <a href="javascript:navmenu('brushtask')" class="btn d-sm-none btn-icon" title="返回">
            {{ SVG.arrow_back_up() }}
          </a>
        </div>
      </div>
    </div>
  </div>
</div>
<!-- 业务页面代码 -->
<div class="page-body">
  <div class="container-xl">
    <div class="row row-cards">
      <div class="col-12">
        <div class="card">
          <div class="card-body border-bottom py-3">
            <div class="d-flex">
              <div class="text-muted">
                共 {{ Count }} 条记录
              </div>
            </div>
          </div>
          <div class="table-responsive">
            <table class="table table-vcenter card-table table-hover table-striped">
              <thead>
              <tr>
                <th>名称</th>
                <th>类型</th>
                <th>地址</th>
                <th class="w-3"></th>
              </tr>
              </thead>
              <tbody>
              {% if Downloaders %}
                {% for Downloader in Downloaders %}
                  <tr>
                    <td>{{ Downloader.name or '' }}</td>
                    <td>{{ Downloader.type or '' }}</td>
                    <td>{{ Downloader.host }}:{{ Downloader.port }}</td>
                    <td>
                      <div class="d-flex">
                        <a href="javascript:show_edit_downloader_modal('{{ Downloader.id }}')" class="btn-action ms-1"
                           title="编辑下载器">
                          {{ SVG.edit() }}
                        </a>
                        <a href="javascript:delete_downloader('{{ Downloader.id }}')" class="btn-action ms-1"
                           title="删除下载器">
                          {{ SVG.x() }}
                        </a>
                      </div>
                    </td>
                  </tr>
                {% endfor %}
              {% else %}
                <tr>
                  <td colspan="4" align="center">没有数据</td>
                </tr>
              {% endif %}
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="modal modal-blur fade" id="modal-add-downloader" tabindex="-1" role="dialog" aria-hidden="true"
     data-bs-backdrop="static" data-bs-keyboard="false">
  <div class="modal-dialog modal-lg modal-dialog-centered modal-dialog-scrollable" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="downloader_modal_title">新增下载器</h5>
        <input type="hidden" id="dl_id">
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <div class="row">
          <div class="col-lg-6">
            <div class="mb-3">
              <label class="form-label required">名称</label>
              <input type="text" value="" id="dl_name" class="form-control" placeholder="别名">
            </div>
          </div>
          <div class="col-lg-6">
            <div class="mb-3">
              <label class="form-label required">类型</label>
              <select class="form-select" id="dl_type">
                <option value="qbittorrent">Qbittorrent</option>
                <option value="transmission">Transmission</option>
              </select>
            </div>
          </div>
          <div class="col-lg-6">
            <div class="mb-3">
              <label class="form-label required">IP地址或域名 <span class="form-help"
                                                                    title="配置IP地址或域名，如为https则需要增加https://前缀"
                                                                    data-bs-toggle="tooltip">?</span></label>
              <input type="text" value="" id="dl_host" class="form-control" placeholder="ip/http/https">
            </div>
          </div>
          <div class="col-lg-6">
            <div class="mb-3">
              <label class="form-label required">端口</label>
              <input type="text" value="" id="dl_port" class="form-control">
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col-lg-6">
            <div class="mb-3">
              <label class="form-label required">用户名</label>
              <input type="text" value="" id="dl_username" class="form-control">
            </div>
          </div>
          <div class="col-lg-6">
            <div class="mb-3">
              <label class="form-label required">密码</label>
              <input type="password" value="" id="dl_password" class="form-control">
            </div>
          </div>
        </div>
      </div>
      <div class="modal-body">
        <div class="row">
          <div class="mb-3">
            <label class="form-label required">保存目录 <span class="form-help" title="下载器使用的文件保存目录"
                                                              data-bs-toggle="tooltip">?</span></label>
            <input type="text" value="" id="dl_save_dir" class="form-control" placeholder="下载器使用路径">
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <a href="javascript:test_downloader_config()" id="dl_test_btn" class="btn me-auto">
          测试
        </a>
        <a href="javascript:add_or_edit_downloader()" id="dl_save_btn" class="btn btn-primary">确定</a>
      </div>
    </div>
  </div>
</div>
<script type="text/javascript">
  // 打开新增窗口
  function show_add_downloader_modal() {
    $("#downloader_modal_title").text("新增下载器");
    $("#dl_test_btn").text("测试");
    $("#dl_id").val("");
    $("#modal-add-downloader").modal('show');
  }

  // 新增下载器
  function add_or_edit_downloader(test) {
    if (!test) {
      test = "";
    } else {
      $("#dl_test_btn").text("测试中...");
    }
    const dl_id = $("#dl_id").val();
    const dl_name = $("#dl_name").val();
    if (!dl_name) {
      $("#dl_name").addClass("is-invalid");
      return;
    } else {
      $("#dl_name").removeClass("is-invalid");
    }
    const dl_host = $("#dl_host").val();
    if (!dl_host) {
      $("#dl_host").addClass("is-invalid");
      return;
    } else {
      $("#dl_host").removeClass("is-invalid");
    }
    const dl_port = $("#dl_port").val();
    if (!dl_port || isNaN(dl_port)) {
      $("#dl_port").addClass("is-invalid");
      return;
    } else {
      $("#dl_port").removeClass("is-invalid");
    }
    const dl_save_dir = $("#dl_save_dir").val();
    if (!dl_save_dir) {
      $("#dl_save_dir").addClass("is-invalid");
      return;
    } else {
      $("#dl_save_dir").removeClass("is-invalid");
    }
    const params = {
      test: test,
      id: dl_id,
      name: dl_name,
      type: $("#dl_type").val(),
      host: dl_host,
      port: dl_port,
      username: $("#dl_username").val(),
      password: $("#dl_password").val(),
      save_dir: dl_save_dir
    };
    ajax_post("add_downloader", params, function (ret) {
      if (test) {
        if (ret.code == 0) {
          $("#dl_test_btn").text("测试成功");
        } else {
          $("#dl_test_btn").text("测试失败！");
        }
      } else {
        $("#modal-add-downloader").modal('hide');
        window_history_refresh();
      }
    });
  }

  // 删除下载器
  function delete_downloader(id) {
    show_ask_modal("是否确认删除该下载器？ ", function () {
      hide_ask_modal();
      const params = {"id": id};
      ajax_post("delete_downloader", params, function (ret) {
        window_history_refresh();
      });
    });
  }

  // 编辑下载器
  function show_edit_downloader_modal(id) {
    $("#downloader_modal_title").text("编辑下载器");
    $("#dl_test_btn").text("测试");
    $("#dl_id").val(id);
    ajax_post("get_downloader", {"id": id}, function (ret) {
      if (ret.code == 0) {
        $("#dl_name").val(ret.info.NAME);
        $("#dl_type").val(ret.info.TYPE);
        $("#dl_host").val(ret.info.HOST);
        $("#dl_port").val(ret.info.PORT);
        $("#dl_username").val(ret.info.USERNAME);
        $("#dl_password").val(ret.info.PASSWORD);
        $("#dl_save_dir").val(ret.info.SAVE_DIR);
        $("#modal-add-downloader").modal('show');
      }
    });
  }

  // 测试下载器
  function test_downloader_config() {
    add_or_edit_downloader(true);
  }
</script>